import Vue from 'vue'
import i18n from '@/i18n'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission'
// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

// 自定义指令  处理头像不显示的问题
// Vue.directive(指令名, 指令配置对象)
Vue.directive('fixImg', {
  // inserted():  每当指令元素插入页面触发
  inserted(el, binding) {
    // console.log(el)
    // console.log(binding)

    // 处理图片为空的问题
    // 写法一
    // if (!el.src) {
    //   el.src = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.ANW5Zm11IujZvmmETfz2rgHaJA&w=140&h=170&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'
    // }
    // 写法二(网络图片)  短路运算
    // el.src = el.src || 'https://ts1.cn.mm.bing.net/th?id=OIP-C.ANW5Zm11IujZvmmETfz2rgHaJA&w=140&h=170&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'
    // 写法二(本地图片)  不能直接用地址, 需要用到node的引入方法(require), 才可以正确的显示图片
    el.src = el.src || binding.value

    // 处理图片错误的情况  (img标签有一个onerror事件, 处理错误图片)
    // 需要监听图片的错误事件
    // 方式一
    // el.onerror = function() {
    //   el.src = require('@/assets/common/head.jpg')
    // }
    // 方式二:  addEventListener
    el.addEventListener('error', () => {
      el.src = binding.value
    })
  },
  update(el, binding) {
    // 不但元素插入页面需要检测, 而且元素更新也要检测
    el.src = el.src || binding.value
  }
})

// 演示全局注册组件
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)

// 引入自己封装好的插件
import MyPlugIn from '@/components/index'
Vue.use(MyPlugIn)

// 过滤器的使用
// 1. 基本使用---自己写一个过滤器
// Vue.filter('formatDate', (oldVal) => {
//   // console.log(70, oldVal)
//   const date = new Date(oldVal)
//   // console.log(71, date)
//   return date.toLocaleDateString()
// })
// 2. 单独引入一个工具函数, 注册成过滤器
// import { formatDate } from '@/filters'
// Vue.filter('formatDate', formatDate)

// 3. 现在拥有大量的工具函数, 希望可以一次性注册成过滤器
// 3.1 引入所有函数   *: 所有   as:  作为
import * as myFilters from '@/filters'
// 这种写法可以将一个文件的export变量全部引入, 组成新对象, 函数名是key, 函数体作为Value, 组成键值对
// console.log('我的函数门', myFilters)
// 3.2 遍历函数, 注册过滤器 (for in 遍历)
for (const key in myFilters) {
  // console.log('键名(函数名)', key)
  // console.log('键值(函数体)', myFilters[key])
  // 3.3 Vue全局使用
  Vue.filter(key, myFilters[key])
}

// 使用混入
import mixin from '@/mixin'
Vue.mixin(mixin)

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 挂载到根实例
  render: h => h(App)
})
